<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻详情</title>

    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./common.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* 设置body高度为100%窗口高度 */
            height: 100%;
            width: 100%;
            /* 弹性盒子模型 */
            background: #ADA996;
            /* fallback for old browsers */
            background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* Chrome 10-25, Safari 5.1-6 */
            background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
            /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

        }

        /* 导航栏 */
        .home-nav {
            background: linear-gradient(45deg, #8da5ba, #778b9d);
            box-shadow: 8px -8px 16px #9fa6ac,
                -8px 8px 16px #a4afb9;
        }

        .layui-nav .userInfo {
            float: right;
        }

        .layui-nav-bar {
            background-color: #9eb9d1;
        }

        /* 新闻详情 */
        .news-content {
            width: 600px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            padding: 100px;
            margin-top: 20px;
        }

        .news-discuss {
            width: 600px;
            height: 300px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .news-discuss textarea {
            width: 600px;
            height: 200px;
            resize: none;

        }

        .news-discuss .layui-btn {
            background: #b5b1a1;
            float: right;
        }
    </style>
</head>

<body>
    <div class="home-nav">
        <ul class="layui-nav">
            <li class="layui-nav-item"><a href="">导航</a></li>

            <li class="layui-nav-item userInfo"><a href="">登录</a></li>
        </ul>
    </div>
    <h1>新闻标题</h1>
    <!-- 新闻详情 -->
    <div class="news-content">


    </div>

    <!-- 新闻评论 -->
    <div class="news-discuss">
        <textarea cols="30" rows="10"></textarea>
        <button class="layui-btn addComment" type="button">立即发布评论</button>
        
    </div>
    <ol class="news-discuss-ol" style="margin-top: 20px; width: 610px; margin-left: auto; margin-right: auto;">
        <li>
            <div class="cmment-content">评论内容</div>
            <div class="comment-edit">
                <button>点赞</button>
                <button>删除</button>
            </div>
        </li>
    </ol>
</body>

</html>
<script>
    // 获取用户登录信息  传递的名称需要与设置的名称一致
    // 目前取出的userInfo 可能是JSON格式的字符串 也可能是空
    let userInfo = getCookie('userInfo')?JSON.parse(getCookie('userInfo')):null;

    if(userInfo){
        // 登录状态
        document.querySelector('.userInfo').innerHTML = `${userInfo.mobile} 用户欢迎`
    }else{
        document.querySelector('.userInfo').innerHTML = '<a href="login.html">登录</a>'
    }
    // 获取到新闻ID
    const newsId = getUrlParam('id');
    ajax({
        url:'http://phpclub.org.cn/edu/server/getContent.php',
        data:{id:newsId},
        success:function(response){
            // 显示信息内容
            document.querySelector('h1').innerHTML = response.data.title;
            document.querySelector('.news-content').innerHTML = response.data.content
        }
    })
    // 发布评论
    document.querySelector('.addComment').onclick = function(){
        if(!userInfo){
            // 说明用户目前没有登录  跳转到登录页
            // encodeURIComponent是js中内置函数 将字符串转换为URL编码格式 
            location.href = 'login.html?callback='+encodeURIComponent(location.href);
            return;
        }
        // 说明用户已经登录
        ajax({
            url:'http://phpclub.org.cn/edu/server/addComment.php',
            type:'post',
            data:{userId:userInfo.id,newsId,content:document.querySelector('textarea').value},
            success: function(backData){
                console.log(backData)
            }
        });
    }

  
   

    let newData = null;
    function init() {
let data = { newsId,page: 1, pagesize: 15 }
if(userInfo){
data.userId = userInfo.id;
}
ajax({
url: "http://phpclub.org.cn/edu/ server/getcomment.php",
data,
success: function (response) {
console.log(response.data[o]);newData = response.data
let html = "";
response.data.forEach(item => {
html += `<li>
<div class="cmment-content">${item.content}</div><div class="comment-edit">
<button class="good">点赞</button><button class="del">制除</ button>
<span class='hasLike'>${item.hasLike}</span></div>
</li>`
})
document.queryselector( '.news-discuss-ol' ).innerHTNL = html;
}
})
}
init();
document. queryselector ( '.news-discuss-ol ') .addEventListener ( 'click',e=>{
if (e.target.className == 'del')
let delList=document.queryselectorAll( '.del')
let index = [ ...dellist ].indexof(e.target)
let commentId=newData[index] .idajax({
url: "http://phpclub.org.cn/edu/server/ deletecomment.php" ,
data:{
userId: userInfo.id,commentId
},
success : function (response){
console.log(response);
init();
}
})
}
//
if(e.target.className == 'good') {
let goodList = document.queryselector4ll( '.good ' )
let index=[ ...goodList ].indexof(e.target)
let commentId = newData[index].id
ajax({
url: "http://phpclub.org.cn/edu/server/commentLike.php",
data:{
userId:userInfo.id,comnentId
},
success:function (response) {
let hasLike = document.queryselectorA11('.hasLike')
hasLike[index].innerHTML++
console.log(response);
init();
}
})
}
})
</script>